<template>
  <div class="animated "   >
    <div class=" animated slideInDown">
     <div class="imgc">
       <div class="return">
        <!-- <div class="icon" @click="goback"> <Icon type="ios-arrow-dropleft" color="#19be6b" size="38"/></div> -->
         <img :src="url" alt="" >
               <div class="plun">
        <h1>this is one<Icon type="ios-heart" ref="ht" @click="heart" size="34" /></h1>
        <p>this is two</p>
        <p> this  is  content View UI（iView） 使用较为安全的蓝色作为主色调，其中 Light Primary 常用于 hover，Dark Primary 常用于 active。</p>
        <Divider color="#4fc08d">评论</Divider>
        
      </div>
       </div>
      
     </div>
</div>

      <div class="talk">
  <div  @click="addtalk" class="demo-home-nav__block"><h3>添加评论</h3> </div>
  
      </div>
  </div>
  
</template>
<script>
import Vue from 'vue'
export default {
  data(){
    return {
      url: Vue.prototype.$imgpath,
           srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
    }
  },
 
  methods:{
    goback(){
       this.$router.push({path: '/mobileShouye'})
    },
    heart(){
     this.$refs.ht.type="ios-ribbon"
   this.$refs.ht.color="#d63031";
      const h = this.$createElement;

        this.$notify({
          title: '提升',
          message: h('i', { style: 'color: teal'}, '收藏成功'),
          
        });
    },
    addtalk(){
       this.$confirm('现在只是演示', '添加评论', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '未登录'
          });          
        });
    },
 
  }
}
</script>
<style  scoped>
.animated{
  
  margin-top: -30px;
  overflow: scroll;
  transition: 1s;
  transform: scale(0.9);
}
.talk{
 
  width: 100vw;
  display: flex;
  justify-content: center;
}
.plun{
  position: relative;
  
  width: 100vw;
  height: 40vh;
}

.plun :nth-child(1){
  padding-top: 15px;
  padding-left: 20px;
  font-size: 28px;
  text-align: left;
}
.plun :nth-child(2){
  padding-left: 20px;
  font-size: 18px;
  text-align: left;
  padding-bottom: 30px;
}
.plun :nth-child(3){
  padding-left: 20px;
  font-size: 10px;
  text-align: left;
 /* color: #4fc08d; */
}
  .imgc{
    display: flex;
    background-size: cover;
   width: 50%;
   position: relative;
   
    height: 50%;
    
    
  }
  .animated {
     width: 100vw;
    flex-wrap: wrap;
    display: flex;
    margin: 0;
    padding: 0;
  }
  
  .animated::after{
    width: 100vw;
    margin-top: 48px;
 /* background-image: url('https://i.acg.blue:4443/images/2020/05/07/81299713.md.png')   ;  */
   content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.979);
    z-index: -2;
    filter: blur(30px);
}
 .icon{
   margin-left: -15px;
   margin-top: -30px;
  float: left;
height: 4vh;
position: absolute;

top: .5%;

 }
 .return{
   width: 100vw;
   height: auto;
   
   position: relative;

  
 }
 img{
  
 
   width: 90vw;
   height: auto;
 }
 .demo-home-nav__block {
     transition: 1s;
    /* position: relative; */
   min-height: 5vh;
   width: 100vw;
    display: flex;
    margin: 10px 10px 12px;
    padding-left: 30px;
    color: #808695;
    font-weight: 500;
    font-size: 14px;
    line-height: 40px;
    background: #4fc08d;
    border-radius: 99px;
    text-align: center;
  
   

}
.demo-home-nav__block:hover{
  width: 80%;
  transform: translateY(-30px);
}

h3{
  margin: 0 auto;
  color: #fff;

}
</style>